<template>
  <view class="fu-badge">
    <!-- 主体内容 -->
    <slot></slot>
    
    <!-- 徽标 -->
    <text
      v-if="show"
      class="fu-badge__content"
      :class="[
        `fu-badge--${type}`,
        {
          'fu-badge--dot': dot,
          'fu-badge--fixed': !!$slots.default
        }
      ]"
      :style="[
        {
          backgroundColor: color,
          top: offset[0] ? `${offset[0]}rpx` : '',
          right: offset[1] ? `${offset[1]}rpx` : ''
        }
      ]"
    >{{ showValue }}</text>
  </view>
</template>

<script>
/**
 * fu-badge 徽标组件
 * @description 在图标或文字右上角展示徽标数字或小红点
 * @property {String | Number} value - 显示值
 * @property {Boolean} show - 是否显示徽标
 * @property {Boolean} dot - 是否显示为小红点
 * @property {String} type - 徽标类型，可选值：primary/success/warning/danger/info
 * @property {Number} max - 最大值，超过最大值会显示 {max}+
 * @property {String} color - 自定义背景颜色
 * @property {Array} offset - 设置徽标的位置偏移，格式为 [top, right]
 */
export default {
  name: 'fu-badge',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    show: {
      type: Boolean,
      default: true
    },
    dot: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'danger',
      validator: value => ['primary', 'success', 'warning', 'danger', 'info'].includes(value)
    },
    max: {
      type: Number,
      default: 99
    },
    color: String,
    offset: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    showValue() {
      if (this.dot) return ''
      
      const value = this.value
      if (typeof value === 'number' && this.max) {
        return value > this.max ? `${this.max}+` : value
      }
      return value
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-badge {
  position: relative;
  display: inline-block;
  
  &__content {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    height: 32rpx;
    min-width: 32rpx;
    padding: 0 8rpx;
    color: #fff;
    font-size: 20rpx;
    line-height: 32rpx;
    text-align: center;
    white-space: nowrap;
    border-radius: 16rpx;
    box-sizing: border-box;
    z-index: 9;
    
    &.fu-badge--fixed {
      position: absolute;
      transform: translate(50%, -50%);
    }
    
    &.fu-badge--dot {
      width: 16rpx;
      min-width: 16rpx;
      height: 16rpx;
      padding: 0;
      border-radius: 50%;
    }
  }
  
  // 主题色
  &--primary {
    background-color: var(--fu-primary-color);
  }
  
  &--success {
    background-color: var(--fu-success-color);
  }
  
  &--warning {
    background-color: var(--fu-warning-color);
  }
  
  &--danger {
    background-color: var(--fu-danger-color);
  }
  
  &--info {
    background-color: var(--fu-info-color);
  }
}
</style> 